import axios from "axios";
import { useEffect, useState } from "react";
// 引入自定义hooks
import useInput from "../常用的自定义hooks/useInput";
// 自定义hooks
// 规范：1.必须是个函数 2.函数名必须以use开头 3.自定义hooks中可以使用其他reacthooks
// 使用场景：业务逻辑重复代码需要复用时可以使用自定hooks
function useCartList(){
    let [list,setList] = useState([])
    useEffect(()=>{
        axios.get("https://apif.java.crmeb.net/api/front/index/product/1/?page=1&limit=10").then(res=>{
            setList(res.data.data.list)
        })
    },[])
    return list;
}
function One(){
    let list = useCartList();
    return(
        <div>
            <h1>one组件---{list.length}</h1>
        </div>
    )
}

function Two(){
    let list = useCartList();
    return(
        <div>
            <h1>Two组件</h1>
            <ol>
                {
                    list.map((item,index)=>{
                            return <li key={index}>{item.storeName}</li>
                    })
                }
            </ol>
        </div>
    )
}

function App(){
    let username = useInput("");
    let password = useInput("")
    return (
        <div>
            <One></One>
            <Two></Two>

            <div>
                <input type="text" {...username} placeholder="请输入用户名"/>
                <input type="text" {...password} placeholder="请输入密码"/>
                <button onClick={()=>{
                    console.log(username.value,password.value)
                }}>登录</button>
            </div>
        </div>
    )
}


export default App;